<template>
	<view class="special-popup" @touchstart="onTouchStart" @touchmove="touchmove" @touchend="onTouchend">
		<view class="title">
			<view class="text">{{title}}</view>
			<view class="icon" @click="$emit('onclose')">
				<u-icon name="close" color="#FFFFFF" size="20"></u-icon>
			</view>
		</view>
		<view class="content">
			<view class="each-item" v-for="item in increaseList[pageNumber]" :key="item.id">
				<image :src="item.image"></image>
				<view class="info">
					<view class="name">{{item.name}}</view>
					<view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
						<view class="cost-price">￥{{item.price}}</view>
						<view style="color:#111111;font-size:24rpx">限购数量：{{item.limit}}</view>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
							<view class="special-price"><text style="font-size: 26rpx;">加购价</text>￥{{item.activityPrice}}</view>
								<div style="position: relative;">
									<Action @add="onAdd(item)"></Action>
									<u-badge absolute :offset="[-10,1]" type="error" :value="item.number"></u-badge>
								</div>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="control">
			<view :class="{current:isCut,next:!isCut}"></view>
			<view :class="{next:isCut,current:!isCut}"></view>
		</view>

		<view class="btn" @click="$emit('onclose')">
			选好了
		</view>
	</view>
</template>

<script>
	import Action from '@/pages/tab_bar/classify/components/actions/actions.vue'
	import {
		throttle
	} from '@/utils/paginate.js'
	export default {
		components: {
			Action,
		},
		data() {
			return {
				pageNumber: 0,
				isCut:true
			}
		},
		name: 'SpecialBuy',
		props: {
			increaseList: {
				type: Array,
				default: []
			},
			title: {
				type: String,
				default: ""
			},
			isUpdate :{
				type:Boolean,
				default:true
			}
		},
		// computed: {
		// 	increaseNewList() {
		// 		return paginate(this.increaseList, this.pageNumber, this.pageSize)
		// 	}
		// },
		watch: {
			isUpdate(val) {
				this.pageNumber = 0
			}
		},
		methods: {
			touchmove(e) {
				this.isCut = false
				const touch = e.touches[0];
				const deltaX = touch.clientX - this.startX;
				const deltaY = touch.clientY - this.startY;
				// console.log(11,Math.abs(deltaX)左右滑动, Math.abs(deltaY) 上下滑动);
				// console.log(uni.getSystemInfoSync().screenWidth); 获取屏幕的宽度
				// const screenWidth = uni.getSystemInfoSync().screenWidth  20px为标准 将负数转为正数

				if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 40) {
					throttle(() => {
						if (deltaX > 0) {
							// 左滑显示下一页右滑显示上一页的数据
							// console.log('向右滑动');
							if (this.pageNumber > 0) {
								this.pageNumber = this.pageNumber - 1
							}
						} else {
							// console.log('向左滑动');
							if(this.increaseList.length > this.pageNumber + 1) {
							this.pageNumber = this.pageNumber + 1 
							}

						}
						// console.log(`滑动距离: ${Math.abs(deltaX)}px`);
					}, 500)
				}
			},
			onTouchStart(e) {
				this.startX = e.touches[0].clientX
				this.startY = e.touches[0].clientY
			},
			onTouchend() {
				// 结束滑动
				this.isCut = true
			},
			onAdd(item) {
				this.$emit('addIncrease',item)
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.special-popup {
		width: 600rpx;

		.title {
			display: flex;
			align-items: center;

			.text {
				width: 600rpx;
				text-align: center;
				color: #FFFFFF;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 91rpx;
			}

			.icon {
				transform: translateX(40rpx);
			}
		}

		.content {
			margin-top: 20rpx;

			.each-item {
				display: flex;
				height: 260rpx;
				width: 600rpx;
				background-color: #fff;
				margin-bottom: 24rpx;
				border-radius: 12rpx;
				overflow: hidden;

				image {
					width: 260rpx;
					height: 260rpx;
				}

				.info {
					flex: 1;
					padding: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: bold;
						font-size: 30rpx;
						color: #111111;
					}

					.cost-price {
						// margin-top: 70rpx;
						font-size: 24rpx;
						color: #AAAAAA;
						line-height: 24rpx;
						text-decoration-line: line-through;
					}

					.special-price {
						font-weight: bold;
						font-size: 34rpx;
						color: #EC3E40;
					}
				}
			}
		}
		.control {
			display: flex;
			justify-content: center;
			.current {
				width: 32rpx;
				height: 8rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				margin-right: 16rpx;
			}
			.next {
				width: 8rpx;
				height: 8rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				opacity: 0.5;
			}
		}
		.btn {
			margin: 70rpx auto 0;
			width: 530rpx;
			height: 90rpx;
			border-radius: 45rpx;
			background: linear-gradient(34deg, #F3C45D, #EDAC2F);
			text-align: center;
			line-height: 90rpx;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 28rpx;
		}
	}
</style>